import mockdata from "@root/P/pages/BidDetailInfo/InputBid/mockdata";
import usePartState from "@module/usePartState";
import Uts from "@module/Uts";
import Rest from "@module/Rest";
import urlHook from "@page/common/utils/urlHook";
import TableComp from './TableComp'
import SearchInput from './SearchInput'
import ToastUtils from "@page/common/utils/ToastUtils"


export default function ModalContent(props) {
    // const defaultList=mockdata.querylist
    const [stateObj, updateState] = usePartState({
        // lists:defaultList,
        lists:[],
        choosedItem:{},
        searchTxt:'',
        hasScrollToBottom:false
    });

    React.useEffect(()=>{
        queryProductForBid();
        addScrollEvent();
        
    },[])

    function addScrollEvent() {
        // const ele=document.querySelector('#r-bid-modal-table-end');
        const table=document.querySelector('.bid-bidinput-table');
        if(table){
            table.addEventListener('scroll',doListener);
        }
    }
    
    function doListener() {
        const ele=document.querySelector('#r-bid-modal-table-end');
        const ele2=document.querySelector('#r-bid-modal-table-end2');
        const pos1 = ele.getBoundingClientRect();
        const pos2 = ele2.getBoundingClientRect();
        let eleTop=pos1.top;
        let eleTop2=pos2.top;
        if(eleTop-eleTop2<2){
            updateState({
                hasScrollToBottom:true
            })
        }else{
            updateState({
                hasScrollToBottom:false
            })
        }

    }


    function queryProductForBid(searchTxt){
        let url=`/shop/admin/product/queryProductForBid`;
        let params={
            // orgId:Uts.getCookie('suppId')-0,
            orgId:Uts.getCookie('orgId')-0,
            // orgId:5,
            size:500,
            status:3,
            search:searchTxt? searchTxt:''
        }

        // ToastUtils.loading()
        Rest.post(url,params)
            .then((res)=>{
                console.log(res)
                // ToastUtils.hide()
                if(res.code=='1'){
                    updateState({
                        lists:res.data||[],
                        searchTxt:searchTxt? searchTxt:''
                    });
                }

            })
            .catch(err=>{
                // ToastUtils.hide()
                console.log(err)
            })
    }




    return (
        <div className="zen_fs-14">
            <SearchInput
                doSearch={(searchTxt)=>{
                    queryProductForBid(searchTxt)
                }}
            />
            <TableComp
                lists={stateObj.lists}
                searchTxt={stateObj.searchTxt}
                onClick={(item)=>{
                    updateState({
                        choosedItem:item
                    })
                }}
            />
            {
                <div id="r-bid-modal-table-end2"></div>
            }
            {
              renderAddNew()
            }
            {
                stateObj.lists&&stateObj.lists.length>0&&(
                    <div className={'bid-bidinput-modal-btns'}>
                        <div
                            onClick={()=>{
                                props.selected(stateObj.choosedItem)
                            }}
                            className={'bid-bidinput-modal-btn1'}>
                            确定
                        </div>
                        <div
                            onClick={props.close}
                            className={'bid-bidinput-modal-btn2'}>
                            返回
                        </div>
                    </div>
                )
            }

        </div>
    );



    function renderAddNew(){
        if(!stateObj.hasScrollToBottom){
            return (
                <div className={'zen_h-20'}/>
            )
        }
        if(stateObj.lists&&stateObj.lists.length>=5){
            return (
                <div className={'zen-flex zen_m-t-20 zen_m-l-10'}>
                    <span>没有合适的竞价商品吗，请您点击</span>
                    <span
                        onClick={()=>{
                            const proId=$state.params.id
                            window.open(urlHook.suppAddProduct(proId))
                        }}
                        className={'zen_0093EB zen_cur-p'}>新增商品</span>
                </div>
            )
        }
        return  null;
    }
}





